<template>
    <div id="cinime">
        <div class="nav">
            <span>全城 <i class="fa fa-caret-down"></i></span>
            <span>品牌 <i class="fa fa-caret-down"></i></span>
            <span>特色 <i class="fa fa-caret-down"></i></span>
        </div>
        <div class="conter">
            <ul>
                <li v-for="item in cinemaList" :key="item.id">
                    <div class="price">
                        <span>{{item.name}}</span>
                        <span>{{item.price}}</span>
                        <span>元起</span>
                    </div>
                    <div class="address">
                        <span>{{item.address}}</span>
                        <span>>{{item.distance}}km</span>
                    </div>
                    <div class="tips">
                        <span>小吃</span>
                        <span>卡折扣</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default{
	name: 'Cinema',
	methods: {
		getCinemaData(){
			var that = this;
			axios.get('/mock/api.json')
			  .then(function (response) {
			    console.log(response);
				if(response.status == 200){
					if(response.data && response.data.cinemaList){
						that.cinemaList = response.data.cinemaList;
					}
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		}
	},
	created(){
		this.getCinemaData();
	},
	data(){
		return{
			cinemaList: []
		}
	}
}
</script>

<style>
#cinime {
    padding-top: 50px;
}

.nav {
    border-bottom: 1px solid #ccc;
}

.nav span {
    width: 33%;
    height: 45px;
    line-height: 45px;
    display: inline-block;
    text-align: center;
}

i {
    margin-left: 5px;
}

.conter li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.price span:nth-child(2) {
    color: #e54847;
    margin: 0 5px;
}

.price span:nth-child(3) {
    color: #e54847;
    font-size: 12px;
}

.address span {
    font-size: 12px;
    color: #999;
}

.address span:last-child {
    float: right;
}

.tips span {
    color: rgb(223, 190, 0);
    border: 2px solid rgb(223, 190, 0);
}
</style>